<template>
  <div>
      <div class="banner">
          <img src="../assets/loginReg/loginLogo.jpg" />
      </div>

      <div class="register_wrap">
            <div class="register_logo">
                <img src="../assets/loginReg/zkbLogo.png" />
            </div>
            <div class="register_title"><h5>代理系统后台</h5><span>V1.0.0</span></div>

            <el-form v-loading="loading" label-width="0px" class="login_form" :model="form" :rules="rules" ref="loginFormRef" status-icon>
                <!-- 手机号 -->
                <el-form-item prop="userphone">
                    <el-input v-model.trim="form.userphone" placeholder="请输入手机号" maxlength="11"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input type="password" v-model.trim="form.password" placeholder="密码名必须6-16个字符" :show-password="true" maxlength="16"></el-input>
                </el-form-item>
                <!-- 确认密码 -->
                <el-form-item prop="checkPass">
                    <el-input type="password" v-model.trim="form.checkPass" placeholder="请再次输入密码" :show-password="true" maxlength="16"></el-input>
                </el-form-item>
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input v-model.trim="form.username" placeholder="用户名必须3-8个字符" maxlength="8"></el-input>
                </el-form-item>
                <!-- 验证码 -->
                <el-form-item prop="checkcode">
                    <el-input class="codeInp" v-model.trim="form.checkcode" placeholder="请输入验证码" maxlength="4"></el-input>
                    <span class="code" @click="refreshCode">
                        <IdentifyCode :identify-code="identifyCode" :content-width="80" :content-height="40"></IdentifyCode>
                    </span>
                </el-form-item>
                <!-- 分割线 -->
                <div class="fengexian"></div>   
                <!-- 注册 -->
                <el-form-item class="btnswrap">
                   <el-button class="btns" type="primary" @click="register">注册</el-button>
                </el-form-item>
                <!-- 去登录 -->
                <div class="tologin">已有账号,去<a @click="tologin">登录</a></div>
            </el-form>
      </div>

      <div class="footer">
          <p class="footer_title">客服热线：400-***-5377</p>
          <p>© 2014-2020 zhongkebang.com All Right Reserved 版权所有:众课帮教育科技有限公司ICP备案/许可证号：粤ICP备170**756号-1</p>
      </div>
  </div>
</template>

<script>
import IdentifyCode from "vue-identifycode"; // 引入验证码包
export default {
  name: "IdentifyCodeTest",
  components: { IdentifyCode },
  data(){
    // 验证手机号的规则
    var checkMobile = (rule,value,cb) => {
        // 验证手机号的正则表达式
        const regMobile = /^1[3456789]\d{9}$/;
        if(regMobile.test(value)) {
            return cb()
        }
        cb(new Error('请输入合法的手机号'))
    }
    //验证验证码的规则
    var checkCode = (rule,value,cb) => {
        if( value.toLowerCase() != this.identifyCode.toLowerCase() ){
            cb(new Error('请输入正确的验证码'))
        }else{
            return cb()
        }
    }
    //确认密码
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
    };
    return{
        form:{
            username:'',
            password:'',
            checkPass:'',
            userphone:'',
            checkcode:''
        },
        rules:{
            checkPass:[
                { required: true, message: '请再次输入密码', trigger: 'blur' },
                { validator: validatePass, trigger: 'blur' }   
            ],
            username:[
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min:3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
            ],
            password:[
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min:6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
            ],
            userphone:[
                { required: true, message: '请输入手机号', trigger: 'blur' },
                { validator: checkMobile, trigger: 'blur' }
            ],
            checkcode:[
                { required: true, message: '请输入验证码', trigger: 'blur' },
                { validator: checkCode, trigger: 'blur' }
            ]
        },
        loading:false,
        identifyCode: ""
    }
  },
  mounted() {
    this.identifyCode = this.createCode();
  },
  methods:{
    restLoginForm(){
        this.$refs.loginFormRef.resetFields();
    },
    createCode() {
      let code = "";
      const codeLength = 4; // 验证码的长度
      // eslint-disable-next-line no-array-constructor
      const random = new Array(2,3,4,5,6,7,8,9,"A","B","C", "D","E","F","G",
        "H","J","K","L","M","N","P","Q","R","S","T","U","V","W","X","Y","Z"
      ); // 随机数
      for (let i = 0; i < codeLength; i++) {
        // 循环操作
        const index = Math.floor(Math.random() * 32); // 取得随机数的索引（0~35）
        code += random[index]; // 根据索引取得随机数加到code上
      }
      return code;
    },
    refreshCode() {
      this.identifyCode = this.createCode();
    },
    register(){
        this.$refs.loginFormRef.validate(
            valid=>{
                if (!valid) return;
                this.loading = true;
                this.$http.post('register',this.form).then((data)=>{
                    this.loading = false;
					var num = data.data.msg.length;
                    if(data.data.success){
						if ( num>1 ) this.$message({
							showClose: true,
							message: data.data.msg + '跳转登录页',
							type: 'success',
							offset:'65',
							duration:1000
						});
                        this.$router.push('/Login')
                    }else{
						if ( num>1 ) this.$message({
							showClose: true,
							message: data.data.msg,
							type: 'error',
							offset:'65',
							duration:1000
						});
                    }
                })
            }
        )
    },
    tologin(){
        this.$router.push('/Login')
    }
  },
  created() {
    var _this = this;
    document.onkeydown = function(e) {   //按下回车提交
        let key = window.event.keyCode;
        if (key == 13) {
            _this.register();
        }
    }
  }
}
</script>

<style scoped>
    .banner{
        width: 100%;
        height: calc(100vh - 240px);
        margin-top: 100px;
    }
    .banner>img{
        width: 100%;
        height: 100%;
    }
    .register_wrap{
        width: 360px;
        background-color: #fff;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        box-shadow: 0px 0px 16px 1px rgba(225, 225, 225, 100);
        border-radius: 8px;
    }
    .register_logo{
        text-align: center;
        margin: 30px 0 16px;
    }
    .register_logo>img{
        width: 60px;
        height: 60px;
    }
    .register_title{
        text-align: center;
    }
    .register_title>h5{
        color: #1777FF;
        font-size: 15px;
    }
    .register_title>span{
        color: #AFAFAF;
        font-size: 12px;
    }

    .login_form{
        width: 100%;
        padding: 20px 20px 0;
        box-sizing: border-box;
    }
    .codeInp{
        width: 75%;
        vertical-align: top;
    }
    .codeInp>input{
        border: none;
    }
    .s-canvas{
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    .code{
        display: inline-block;
        vertical-align: top;
        width: 20%;height: 40px;
        cursor: pointer;
    }
    .fengexian{
        border-top: 1px solid #eee;
        margin-bottom: 20px;
    }
    .btns{
        width: 100%;
    }
    .btnswrap{
        margin-bottom: 12px;
    }
    .tologin{
        font-size: 12px;
        margin-bottom: 10px;
        text-align: right;
    }
    .tologin>a{
        color: #1777FF;
        cursor: pointer;
        text-decoration: underline;
    }

    .footer{
        color: #9f9f9f;
        font-size: 12px;
        text-align: center;
    }
    .footer_title{
        margin: 40px 0 16px;
    }
</style>
